import { saveAs } from "file-saver";
import styled from "styled-components";
// ✅ 正确写法（导入命名导出）
import { QRCodeSVG } from "qrcode.react";
// 或者
import { QRCodeCanvas } from "qrcode.react";

const QRContainer = styled.div`
  margin-top: 2rem;
  text-align: center;

  button {
    background: #3498db;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: #2980b9;
    }
  }
`;

const QRCodeGenerator = ({ vCardData }: { vCardData: string }) => {
  const downloadQR = () => {
    const canvas = document.getElementById("qrcode") as HTMLCanvasElement;
    if (canvas && canvas.toBlob) {
      canvas.toBlob((blob) => {
        if (blob) {
          saveAs(blob, "business-card.png");
        } else {
          console.error("无法生成二维码图片");
        }
      }, "image/png");
    } else {
      console.error("当前环境不支持 toBlob 方法");
    }
  };

  return (
    <QRContainer>
      <QRCodeSVG
        id="qrcode"
        value={vCardData}
        size={200}
        level="H"
        includeMargin
      />
      <button onClick={downloadQR}>下载二维码</button>
    </QRContainer>
  );
};

export default QRCodeGenerator;
